<template>
  <div class="myCanvs-box">
    <div class="canvas-wrap">
      <canvas id="canvas" width="400" height="400"></canvas>

    </div>
  </div>
</template>



<script setup>
import {onMounted} from "vue"
onMounted(() => {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.fillRect(10, 10, 150, 100);
  // ctx.restore()
  // ctx.clearRect(10,10,150,150)
  ctx.arc(100,200,50,0,2*Math.PI)
  ctx.strokeStyle='red';
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(10,230)
  ctx.lineTo(50,230);
  ctx.lineTo(50,270);
  ctx.closePath()//如果用fill则可不写这步
  ctx.strokeStyle='blue';
  ctx.stroke();
  // ctx.clearRect(0,0,400,400)
  ctx.font="20px serif"
  ctx.fillText("Hello",10,270)
  ctx.clearRect(0,0,400,400)
  var img = new Image();
  img.onload = function(){
      ctx.drawImage(img,0,0);
      ctx.beginPath();
      ctx.moveTo(30,96);
      ctx.lineTo(70,66);
      ctx.lineTo(103,76);
      ctx.lineTo(170,15);
      ctx.stroke();
    }
  img.src = '/src/礼品 (1)@2x.png';
})


</script>